<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.js"></script>
    <style>
        * {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        @font-face{
            font-family: QS-R;
            src:url(./font/Quicksand-Regular.ttf);
        }

        @font-face{
            font-family: QS-M;
            src:url(./font/Quicksand-Medium.ttf);
        }
        .nav .nav-content {
            width: 700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .nav .nav-content h1{
            font-family: QS-R;
            text-align:right;
        }
        .nav .wel-content div {
            font-size: 32px;
            font-family: QS-R;
            font-weight: 900;
            text-align: right;
        }
    </style>
    <style>
        .split-line {
            width:700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .dot {
            font-size:0;
            border-radius: 50%;
            border: 5px solid black;

        }
    </style>
    <style>
        .clearfix::after {
            content:"";
            display: block;
            height:0;
            clear: both;
        }

        .main {
            width:627px;
            margin: 50px auto 0;
        }

    </style>


    <style>
        .main .itemTitle{
            font-family: QS-B;
        }

        .main .itemInfo {
            color: darkgray;
            font-family: QS-B;
            font-size: 18px;
        }

        .main .attachment {
            background-color: lightgray;
            font-size: 18px;
            margin: 10px 0;
            text-decoration: underline  ;
        }
        .main .table {

            width: 540px;
            height: 150px;
            margin: 0 auto;
        }
        .top {
            float: left;
        }
        .buttom {
            float: left;
        }

        .table-title {
            width: 200px;
            text-align: center;
            height: 75px;
            border: 3px royalblue solid;
            font-size: 18px;
            font-family: QS-B;
            line-height: 75px;
            font-weight: 700;
            border-right: none;
        }

        .table-info {
            width: 340px;
            text-align: center;
            height: 75px;
            border: 3px royalblue solid;
            font-size: 18px;
            font-family: QS-B;
            line-height: 75px;
            font-weight: 700;
        }
        .mg {
            font-size: 18px;
            font-family: QS-R;
            border: 3px royalblue solid;
            height: 50px;
            line-height: 29px;

            margin-top: 30px;

        }

        .disabled-style {
            color: darkgray;
        }
        .main .detail .file {
            position: absolute;
            top: 0px;
            opacity: 0;
        }
        .detail-content {
            height: 27px;
            background-color: #d5d5d5;

            margin: 8px 10px;

        }
        #update:hover {
         cursor: pointer;
        }
        #delete:hover{
            cursor: pointer;
        }

        .disabled-style:hover{
            cursor: pointer;
        }
        .button {
            width:126px;
            height:30px;
            color:white;
            background-color:#004aad;
            border:none;
            border-radius:8px;
            font-family:QS-M;
            font-size: 20px;
        }
        .loading-bar {
            width:150px;
            height:110px;
            border-radius:8px;
            background-color:#707070;
            opacity:0.8;
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin: auto;
            text-align: center;
        }
        @keyframes loading{
            0% {
                transform:rotate(0deg)
            }
            100%{
                transform:rotate(360deg)
            }
        }
        .loading-icon {
            animation:loading linear 1s infinite;
        }
    </style>
</head>
<body>

<div class="nav">
    <div class="nav-content">
        <div class="logo"><img src="/image/LOGO.png"  style="width:222px;height:114px;"></div>
        <div class="wel-content">
            <div>Welcome!</div>
            <div>SSK3313 G4</div>
        </div>
    </div>
</div>
<div class="split-line">
    <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span>
</div>
<div class="main clearfix">
    <div class="loading-bar" id="loading-bar" style="display:none;">
        <p>
            <svg t="1642230754233" class="loading-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8715" id="mx_n_1642230754236" data-spm-anchor-id="a313x.7781069.0.i39" width="64" height="64"><path d="M512 337.322667a26.666667 26.666667 0 0 1-26.666667-26.666667V197.333333a26.666667 26.666667 0 1 1 53.333334 0v113.322667c0 14.762667-11.946667 26.666667-26.666667 26.666667z" fill="#707070" p-id="8716" data-spm-anchor-id="a313x.7781069.0.i49" class="selected"></path><path d="M424.661333 360.746667a26.666667 26.666667 0 0 1-36.394666-9.728l-56.661334-98.133334a26.666667 26.666667 0 0 1 46.122667-26.666666l56.661333 98.133333a26.624 26.624 0 0 1-9.728 36.394667z" fill="#707070" opacity=".9" p-id="8717" data-spm-anchor-id="a313x.7781069.0.i48" class="selected"></path><path d="M360.746667 424.661333a26.624 26.624 0 0 1-36.394667 9.728l-98.133333-56.661333a26.624 26.624 0 1 1 26.666666-46.122667l98.133334 56.661334c12.714667 7.338667 17.066667 23.68 9.728 36.394666z" fill="#707070" opacity=".85" p-id="8718" data-spm-anchor-id="a313x.7781069.0.i47" class=""></path><path d="M337.322667 512c0 14.72-11.946667 26.666667-26.666667 26.666667H197.333333a26.666667 26.666667 0 1 1 0-53.333334h113.322667c14.762667 0 26.666667 11.946667 26.666667 26.666667z" fill="#707070" opacity=".8" p-id="8719" data-spm-anchor-id="a313x.7781069.0.i46" class=""></path><path d="M360.746667 599.338667a26.666667 26.666667 0 0 1-9.728 36.394666l-98.133334 56.661334a26.666667 26.666667 0 0 1-26.666666-46.122667l98.133333-56.661333a26.624 26.624 0 0 1 36.394667 9.728z" fill="#8a8a8a" opacity=".75" p-id="8720" data-spm-anchor-id="a313x.7781069.0.i45" class=""></path><path d="M424.661333 663.253333a26.624 26.624 0 0 1 9.728 36.394667l-56.661333 98.133333a26.624 26.624 0 1 1-46.122667-26.666666l56.661334-98.133334a26.666667 26.666667 0 0 1 36.394666-9.728z" fill="#8a8a8a" opacity=".7" p-id="8721" data-spm-anchor-id="a313x.7781069.0.i44" class=""></path><path d="M512 686.677333c14.72 0 26.666667 11.946667 26.666667 26.666667v113.322667a26.666667 26.666667 0 1 1-53.333334 0v-113.322667c0-14.762667 11.946667-26.666667 26.666667-26.666667z" fill="#8a8a8a" opacity=".65" p-id="8722" data-spm-anchor-id="a313x.7781069.0.i43" class=""></path><path d="M599.338667 663.253333a26.666667 26.666667 0 0 1 36.394666 9.728l56.661334 98.133334a26.666667 26.666667 0 0 1-46.122667 26.666666l-56.661333-98.133333a26.624 26.624 0 0 1 9.728-36.394667z" fill="#8a8a8a" opacity=".6" p-id="8723" data-spm-anchor-id="a313x.7781069.0.i42" class=""></path><path d="M663.253333 599.338667a26.624 26.624 0 0 1 36.394667-9.728l98.133333 56.661333a26.624 26.624 0 1 1-26.666666 46.122667l-98.133334-56.661334a26.666667 26.666667 0 0 1-9.728-36.394666z" fill="#cdcdcd" opacity=".55" p-id="8724" data-spm-anchor-id="a313x.7781069.0.i41" class=""></path><path d="M686.677333 512c0-14.72 11.946667-26.666667 26.666667-26.666667h113.322667a26.666667 26.666667 0 1 1 0 53.333334h-113.322667a26.666667 26.666667 0 0 1-26.666667-26.666667z" fill="#cdcdcd" opacity=".5" p-id="8725" data-spm-anchor-id="a313x.7781069.0.i40" class=""></path><path d="M663.253333 424.661333a26.666667 26.666667 0 0 1 9.728-36.394666l98.133334-56.661334a26.666667 26.666667 0 0 1 26.666666 46.122667l-98.133333 56.661333a26.624 26.624 0 0 1-36.394667-9.728z" fill="#ffffff" opacity=".4" p-id="8726" data-spm-anchor-id="a313x.7781069.0.i38" class=""></path><path d="M599.338667 360.746667a26.624 26.624 0 0 1-9.728-36.394667l56.661333-98.133333a26.624 26.624 0 1 1 46.122667 26.666666l-56.661334 98.133334a26.666667 26.666667 0 0 1-36.394666 9.728z" fill="#ffffff" opacity=".3" p-id="8727" data-spm-anchor-id="a313x.7781069.0.i36" class=""></path></svg>
        </p>
        <p>
            <span id="load-msg" style="color:white;font-size:14px">Loading</span>
        </p>

    </div>
    <div class="intput-bar">
        <input type="hidden" id="uniId" th:value="${user.uniId}">
        <input type="hidden" id="userId" th:value="${user.userId}">
        <input type="hidden" id="itemId" th:value="${courseTopicItem.itemId}">
        <input type="hidden" id="itemType" th:value="${courseTopicItem.itemType}">
        <input type="hidden" id="courseId" th:value="${courseId}">
        <input type="hidden" id="courseGroup" th:value="${courseGroup}">
    </div>

    <div class="itemTitle">
        <h3 th:text="${courseTopicItem.itemTitle}">Lab Practice SQL2</h3>
    </div>

    <div class="itemInfo">
        <p th:text="${courseTopicItem.itemInfo}">No item info</p>
    </div>

    <div class="attachment" th:if="${courseTopicItem.attachment}">
        <a th:text="${courseTopicItem.attachment}" th:href="@{/course/download(addr=${courseTopicItem.uuid},name=${courseTopicItem.attachment},contentType=${courseTopicItem.contentType})}">Lab_Practice_SQL.sql</a>
    </div>

    <div class="dur-bar" th:switch="${courseTopicItem.itemType}">
       <div th:case="'TASK'" class="table">
           <div class="table-top clearfix">
               <div class="top table-title">Due Date</div>
               <div class="top table-info" th:text="${courseTopicItem.itemDue}">04Dec-2020 00.00</div>
           </div>
           <div class="table-button clearfix">
               <div class="buttom table-title" style="border-top: none">Status</div>
               <div class="buttom table-info"  style="border-top: none" th:text="${flag}">Late</div>
           </div>
           <div th:switch="${flag}">
               <div th:case="'Unsubmitted'" class="mg detail add-topic" style="position: relative;line-height: 45px">
                   <div>
                       <span class="upload-btn glyphicon glyphicon-plus" style="color: #1758E9;margin: 0 5px"></span>
                       <span id="fileName" class="upload-btn disabled-style">Uplodate attachrpent here</span>
                       <input style="display: none" type="file" name="file"  class="form-control file" id="exampleInputFile" placeholder="Uplodate attachrpent here">
                   </div>
                   <div class="btn-bar">
                       <input style="line-height: 10px; margin-left: 276px;margin-top: 30px;" type="button" id="back" class="button back" Value="Back">
                       <input style="line-height: 10px;"  type="button" id="submit" class="button next" Value="Submit">
                   </div>
               </div>



               <div th:case="'Late'" class="mg detail add-topic" style="position: relative">
                   <div class="detail-content" style="background-color: #d5d5d5">
                       <span class="glyphicon glyphicon-plus" style="color: #1758E9;margin: 0 5px"></span>
                       <span  id="fileName" class="disabled-style"><a style="text-decoration: underline" th:href="@{/course/download(addr=${submitRecord.uuid},name=${submitRecord.attachment})}" th:text="${submitRecord.attachment}">12345_Jimmy_Lab2.sql</a></span>
                       <input style="display: none" type="file" name="file"  class="form-control file" id="exampleInputFile" placeholder="Uplodate attachrpent here">
                       <svg id="update"  style="float: right" t="1642975824646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34863" width="18" height="18">
                           <path style="fill:#1758E9" d="M847.743 223.953H640.639c-3.132-68.921-60.177-124.029-129.858-124.029s-126.726 55.108-129.858 124.029H173.256c-17.673 0-32 14.327-32 32s14.327 32 32 32h674.487c17.673 0 32-14.327 32-32s-14.327-32-32-32z m-336.962-60.03c34.379 0 62.689 26.426 65.718 60.029H445.064c3.029-33.603 31.338-60.029 65.717-60.029zM767.743 351.79c-17.673 0-32 14.327-32 32v478.173H288.256V383.79c0-17.673-14.327-32-32-32s-32 14.327-32 32v510.173c0 17.673 14.327 32 32 32h511.487c17.673 0 32-14.327 32-32V383.79c0-17.673-14.327-32-32-32z" p-id="34864" fill="#1296db"></path>
                           <path style="fill:#1758E9" d="M449.306 732.802V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z m191.534 0V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z" p-id="34865" fill="#1296db"></path>
                       </svg>
                       <svg id="delete" style="float: right" t="1642975691671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33191" width="18" height="18">
                           <path style="fill:#1758E9" d="M732 174.4l117.7 117.7c9.9 9.9 9.9 26.2 0 36l-41 41c-9.9 9.9-26.2 9.9-36 0L655.2 251.4c-9.9-9.9-9.9-26.2 0-36l41-41c9.8-9.9 26-9.9 35.8 0zM616.9 289.7l117.7 117.7c9.9 9.9 9.9 26.2 0 36L425.8 752.2c-9.9 9.9-26.2 9.9-36 0L272 634.4c-9.9-9.9-9.9-26.2 0-36l308.8-308.8c9.9-9.9 26.1-9.9 36.1 0.1zM232.4 674l117.8 117.8c9.9 9.9 9.9 26.2 0 36L212 849.6c-9.9 9.9-26.2 9.9-36 0l-1.8-1.8c-9.9-9.9-9.9-26.2 0-36L196.4 674c9.9-9.9 26.2-9.9 36 0z" fill="#1296db" p-id="33192"></path>
                       </svg>

                   </div>
                   <div class="btn-bar">
                       <input style="line-height: 10px;margin-left: 276px;margin-top: 30px;" type="button" id="back" class="button back" Value="Back">
                       <input style="line-height: 10px;"  type="button" id="save" class="button next" Value="Save">
                   </div>
               </div>
               <div th:case="'Submitted'" class="mg detail add-topic" style="position: relative">
                   <div class="detail-content" style="background-color: #d5d5d5">
                       <span class="glyphicon glyphicon-plus" style="color: #1758E9;margin: 0 5px"></span>
                       <span  id="fileName" class="disabled-style"><a style="text-decoration: underline" th:href="@{/course/download(addr=${submitRecord.uuid},name=${submitRecord.attachment},contentType=${submitRecord.contentType})}" th:text="${submitRecord.attachment}">12345_Jimmy_Lab2.sql</a></span>
                       <input style="display: none" type="file" name="file"  class="form-control file" id="exampleInputFile" placeholder="Uplodate attachrpent here">
                       <svg id="delete"  style="float: right" t="1642975824646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34863" width="18" height="18">
                           <path style="fill:#1758E9" d="M847.743 223.953H640.639c-3.132-68.921-60.177-124.029-129.858-124.029s-126.726 55.108-129.858 124.029H173.256c-17.673 0-32 14.327-32 32s14.327 32 32 32h674.487c17.673 0 32-14.327 32-32s-14.327-32-32-32z m-336.962-60.03c34.379 0 62.689 26.426 65.718 60.029H445.064c3.029-33.603 31.338-60.029 65.717-60.029zM767.743 351.79c-17.673 0-32 14.327-32 32v478.173H288.256V383.79c0-17.673-14.327-32-32-32s-32 14.327-32 32v510.173c0 17.673 14.327 32 32 32h511.487c17.673 0 32-14.327 32-32V383.79c0-17.673-14.327-32-32-32z" p-id="34864" fill="#1296db"></path>
                           <path style="fill:#1758E9" d="M449.306 732.802V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z m191.534 0V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z" p-id="34865" fill="#1296db"></path>
                       </svg>
                       <svg id="update" style="float: right" t="1642975691671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33191" width="18" height="18">
                           <path style="fill:#1758E9" d="M732 174.4l117.7 117.7c9.9 9.9 9.9 26.2 0 36l-41 41c-9.9 9.9-26.2 9.9-36 0L655.2 251.4c-9.9-9.9-9.9-26.2 0-36l41-41c9.8-9.9 26-9.9 35.8 0zM616.9 289.7l117.7 117.7c9.9 9.9 9.9 26.2 0 36L425.8 752.2c-9.9 9.9-26.2 9.9-36 0L272 634.4c-9.9-9.9-9.9-26.2 0-36l308.8-308.8c9.9-9.9 26.1-9.9 36.1 0.1zM232.4 674l117.8 117.8c9.9 9.9 9.9 26.2 0 36L212 849.6c-9.9 9.9-26.2 9.9-36 0l-1.8-1.8c-9.9-9.9-9.9-26.2 0-36L196.4 674c9.9-9.9 26.2-9.9 36 0z" fill="#1296db" p-id="33192"></path>
                       </svg>
                   </div>
                   <div class="btn-bar">
                       <input style="line-height: 10px;margin-left: 276px;margin-top: 30px;" type="button" id="back" class="button back" Value="Back">
                       <input style="line-height: 10px;"  type="button" id="save" class="button next" Value="Save">
                   </div>
               </div>
           </div>

       </div>
        <div th:case="*">
            <div class="btn-bar">
                <input style="line-height: 10px; margin-left:500px;margin-top: 30px" type="button" id="back" class="button back" Value="Back">

            </div>
        </div>
    </div>


    <script>

        $("#back").click(function () {
            let uniId = $("#uniId").val();
            let courseId = $("#courseId").val();
            document.location = `/courseInfo/${uniId}/${courseId}`
        })

        $("#exampleInputFile").change(function () {
            $("#fileName").html($("#exampleInputFile")[0].files[0].name)
        })

        $(".upload-btn").click(function () {
            $("#exampleInputFile").click()
        })

        $("#submit").click(function () {
            let formData = new FormData();
            formData.append("itemType",$("#itemType").val());
            formData.append("itemId",$("#itemId").val());
            formData.append("userId",$("#userId").val());
            formData.append("courseId",$("#courseId").val());
            formData.append("uniId",$("#uniId").val());
            formData.append("courseGroup",$("#courseGroup").val());

            if ($("#exampleInputFile")[0].files[0]===undefined){

                alert("请选择文件")
                retrun;
            }
            formData.append("attachment",$("#fileName").html());
            formData.append("file",$("#exampleInputFile")[0].files[0]);



            $("#load-msg").text("uploading!")
            $("#loading-bar").show();

            $.ajax({
                url:"/course/uploadFile",
                method:"POST",
                data:formData,
                contentType:false,
                processData: false,
                success:function (data) {
                    if (data.code===true){
                        // $("#back").click()
                        $("#loading-bar").text("Loading!");
                        $("#loading-bar").hide();
                        document.location.reload()
                    }else {
                        $("#loading-bar").text("Loading!");
                        $("#loading-bar").hide();
                        alert(data.errMsg);
                    }
                }
            })
        })
        $("#update").click(function () {
            $("#exampleInputFile").click();
        })

        $("#delete").click(function () {
            let formData = new FormData();
            formData.append("itemId",$("#itemId").val());
            $("#load-msg").text("uploading!")
            $("#loading-bar").show();

            $.ajax({
                url:"/course/deleteFile",
                method:"POST",
                data:formData,
                contentType:false,
                processData: false,
                success:function (data) {
                    if (data.code===true){
                        // $("#back").click()
                        $("#loading-bar").text("Loading!");
                        $("#loading-bar").hide();
                        document.location.reload()
                    }else {
                        $("#loading-bar").text("Loading!");
                        $("#loading-bar").hide();
                        alert(data.errMsg);
                    }
                }
            })

        })

        $("#save").click(function () {
            let formData = new FormData();
            formData.append("itemType",$("#itemType").val());
            formData.append("itemId",$("#itemId").val());
            formData.append("userId",$("#userId").val());
            formData.append("courseId",$("#courseId").val());
            formData.append("uniId",$("#uniId").val());
            formData.append("courseGroup",$("#courseGroup").val());

            if ($("#exampleInputFile")[0].files[0]===undefined){

                alert("请选择文件")
                retrun;
            }
            formData.append("attachment",$("#fileName").html());
            formData.append("file",$("#exampleInputFile")[0].files[0]);



            $("#load-msg").text("uploading!")
            $("#loading-bar").show();

            $.ajax({
                url:"/course/uploadFile",
                method:"POST",
                data:formData,
                contentType:false,
                processData: false,
                success:function (data) {
                    if (data.code===true){
                        // $("#back").click()
                        $("#loading-bar").text("Loading!");
                        $("#loading-bar").hide();
                        document.location.reload()
                    }else {
                        $("#loading-bar").text("Loading!");
                        $("#loading-bar").hide();
                        alert(data.errMsg);
                    }
                }
            })
        })
    </script>


</body>
</html>